<h2>主题样式</h2>
<div id="centra-mode-form">
    <form onsubmit="return false" autocomplete="off">
        <div class="form-group">
            <label class="control-label">暗黑模式</label>
            <div class="checkbox">
                <select name="dark_mode" class="form-control">
                    <option value="0">跟随系统</option>
                    <option value="1">开启</option>
                    <option value="2">定时开启</option>
                    <option value="3">关闭</option>
                </select>
            </div>
        </div>
        <div class="form-group" data-name="dark_time">
            <label class="control-label">开启时间</label>
            <div class="input-group">
                <select name="dark_time_bh" class="form-control">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                </select>
                <span class="input-group-addon">:</span>
                <select name="dark_time_bm" class="form-control">
                    <option value="00">00</option>
                    <option value="05">05</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                    <option value="35">35</option>
                    <option value="40">40</option>
                    <option value="45">45</option>
                    <option value="50">50</option>
                    <option value="55">55</option>
                </select>
                <span class="input-group-addon">&emsp;&emsp;~&emsp;&emsp;</span>
                <select name="dark_time_eh" class="form-control">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                </select>
                <span class="input-group-addon">:</span>
                <select name="dark_time_em" class="form-control">
                    <option value="00">00</option>
                    <option value="05">05</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                    <option value="35">35</option>
                    <option value="40">40</option>
                    <option value="45">45</option>
                    <option value="50">50</option>
                    <option value="55">55</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="form-control-static help-block text-muted">
                注意: 此设置保存在当前浏览器, 不同步到服务端, 与登录用户无关.
            </div>
        </div>
        <div>
            <button type="submit" class="commit btn btn-primary">应用</button>
            <button type="button" class="cancel btn btn-link"   >取消</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    (function($) {
        var context = H$("#centra-mode-form");
        var mode = H$("%HsDarkMode") || "0";
        var time = H$("%HsDarkTime") || "18000600";

        // 写入表单
        context.find("[name=dark_mode]").val(mode);
        context.find("[name=dark_time_bh]").val(time.substring(0,2));
        context.find("[name=dark_time_bm]").val(time.substring(2,4));
        context.find("[name=dark_time_eh]").val(time.substring(4,6));
        context.find("[name=dark_time_em]").val(time.substring(6,8));

        // 记录设置
        context.find("form").submit(function() {
            var mode = context.find("[name=dark_mode]").val();
            var time = context.find("[name=dark_time_bh]").val()
                     + context.find("[name=dark_time_bm]").val()
                     + context.find("[name=dark_time_eh]").val()
                     + context.find("[name=dark_time_em]").val();
                H$("%HsDarkMode" , mode);
            if (mode === "2" ) {
                H$("%HsDarkTime" , time);
            } else {
                H$("%HsDarkTime" , null);
            }
            hsDarkMode(mode , time);
            context.find(".cancel").click();
        });

        // 定时切换
        context.find("[name=dark_mode]")
        .change(function() {
            if ($(this).val( ) === "2" ) {
                context.find("[data-name=dark_time]").show();
            } else {
                context.find("[data-name=dark_time]").hide();
            }
        })
        .change();
    })(jQuery);
</script>